import React, { useEffect, useState } from "react";
import { Form, Input, message, Modal, TreeSelect } from "antd";
import { FormComponentProps } from "antd/es/form";
import api from '@/services'
const { TreeNode } = TreeSelect;
import {getAccessToken} from '@/utils/authority';

interface Props extends FormComponentProps {
  data?: any,
  close: Function,
  save: Function
}

const Save = (props: Props) => {
  const { form, form: { getFieldDecorator } } = props;
  const [categoryList, setCategoryList] = useState([]);
  const token = getAccessToken();

  const save = () => {
    form.validateFields((err, fileValue) => {
      if (err) return;
      console.log('props.data.data',props.data.data)
      let param = {
        id: fileValue.id,
        dmName: fileValue.dmName,
        type: "big_screen",
        target: "",
        metaData: props.data.data.metaData,
        state:{
            text: "启用",
            value: "enabled"
        }
      }
      api.configuration.save(param).then(res => {
        if (res.status === 200) {
          console.log(res)
          props.save();
          // window.open(`http://124.70.83.232:7100/draw/?patternId=${res.result.id}&token=${token}`, '_blank')
          window.open(`http://114.115.175.60:7100/draw/?patternId=${res.result.id}&token=${token}`, '_blank')
          // window.open(`http://localhost:8080/?patternId=${res.result.id}&token=${token}`, '_blank')
        }
      })
    })
  };
  let getView = (view: any) => {
    return (
      <TreeNode title={view.name} value={view.id} key={view.id}>
        {
          view.children && view.children.length > 0 ? view.children.map((v: any) => {
            return getView(v)
          }) : ''
        }
      </TreeNode>
    )
  };
  useEffect(() => {
    api.configuration.getById(props.data.data.id).then(res => {
      if (res.status === 200) {
        console.log(res)
        props.data.data = res.result
        console.log(props.data)
      }
    })
  }, []);
  return (
    <Modal
      visible
      title="复制组态"
      onCancel={() => props.close()}
      onOk={() => {
        save()
      }}
    >
      <Form labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
      <Form.Item key="dmName" label="组态名称">
          {getFieldDecorator('dmName', {
            rules: [{ required: true, message: '请输入组态名称' }]
          })(<Input placeholder="请输入组态名称" />)}
        </Form.Item>
      </Form>
    </Modal>
  )
};
export default Form.create<Props>()(Save);
